<template>
  <PageWrapper contentBackground>
    <a-button preIcon="ant-design:left-outlined" type="link" @click="doBack"> 返回 </a-button>
    <CollapseContainer title="修改教师基本信息">
      <BasicForm @register="register" @submit="handleSubmit" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted } from 'vue';
  import { BasicForm, ButtonProps, FormSchema, useForm } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container';
  import { PageWrapper } from '/@/components/Page';
  import { updateTeacher } from '../../api/preschool/teacher';
  import { useRouter } from 'vue-router';
  import { useTeacherInfoStore } from '/@/store/modules/teacher';
  const schemas: FormSchema[] = [
    {
      field: 'divider-basic',
      component: 'Divider',
      label: '基本信息',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'name',
      rules: [
        {
          required: true,
          // [\u4e00 - \u9fa5]  ==> 可以匹配2万多中文繁简体字符
          validator: async (_rule, value) => {
            if (!value) {
              return Promise.reject('请输入姓名');
            }
            if (!/[\u4e00-\u9fa5]{1,6}/.test(value)) {
              /* eslint-disable-next-line */
              return Promise.reject('姓名只能是中文');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
      component: 'Input',
      label: '姓名',
      colProps: {
        span: 8,
      },
      componentProps: ({ schema, formModel }) => {
        console.log('form:', schema);
        console.log('formModel:', formModel);
        return {
          placeholder: '请输入姓名',
          onChange: (e: any) => {
            console.log(e);
          },
        };
      },
    },
    {
      field: 'qualificationCqertqificateNo',
      label: '教师资格证号',
      rules: [
        { required: true },
        {
          validator: (_rule, value) => {
            if (isNaN(value)) {
              return Promise.reject('请输入数字');
            } else {
              return Promise.resolve();
            }
          },
        },
      ],
      component: 'Input',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'teacherPhone',
      label: '教师手机号',
      rules: [
        { required: true },
        {
          validator: (_rule, value) => {
            if (isNaN(value)) {
              return Promise.reject('请输入数字');
            } else {
              return Promise.resolve();
            }
          },
        },
      ],
      component: 'Input',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'level',
      rules: [{ required: true, type: 'number' }],
      component: 'Select',
      label: '级别',
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: '高级讲师',
            value: 1,
            key: '1',
          },
          {
            label: '首席讲师',
            value: 2,
            key: '2',
          },
        ],
      },
    },
    {
      field: 'career',
      rules: [{ required: true }],
      label: '资历',
      component: 'Input',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'intro',
      rules: [{ required: true }],
      label: '简介',
      component: 'InputTextArea',
      colProps: {
        span: 16,
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm, CollapseContainer, PageWrapper },
    setup() {
      const router = useRouter();
      const submitConfig: ButtonProps = {
        text: '提交修改',
      };
      const doBack = () => {
        router.back();
      };
      const [register, { setFieldsValue }] = useForm({
        autoFocusFirstItem: true,
        autoSubmitOnEnter: true,
        submitButtonOptions: submitConfig,
        labelWidth: 100,
        schemas: schemas,
        actionColOptions: { span: 24 },
      });
      const teacherStore = useTeacherInfoStore();
      onMounted(() => {
        setFieldsValue(teacherStore.getTeacherInfo);
      });

      return {
        handleSubmit: (values: any) => {
          values.id = teacherStore.getTeacherInfo.id;
          console.log('values', values);
          updateTeacher(values)
            .then((res) => {
              console.log(res);
              doBack();
            })
            .catch((error) => {
              console.log('error' + error);
            });
        },
        // 霖
        doBack,
        register,
      };
    },
  });
</script>
